//趋势预测（功能6）
//新版本echarts有一个方法不存在，切换为echarts旧版本使用其他方式才解决问题
<template>
  <div>
    <blockquote>数据截止至2021年8月9日</blockquote>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="网游竞技" name="first"></el-tab-pane>
      <el-tab-pane label="单机热游" name="second"></el-tab-pane>
      <el-tab-pane label="娱乐天地" name="third"></el-tab-pane>
      <el-tab-pane label="手游休闲" name="fourth"></el-tab-pane>
    </el-tabs>
    <div id="guessAnchor" :style="{ width: '1000px', height: '700px' }" />
  </div>
</template>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>


<script>
// eslint-disable-next-line no-unused-vars
import ecStat from "echarts-stat";
import * as echarts from "echarts";
import stores from "@/store";
export default {
  name: "netGame",
  data() {
    return {
      activeName: "first",
    };
  },
  mounted() {
    this.$axios
      .post(stores.spring_url + "/home/function6/first", "first")
      .then((res) => {
        console.log(res.data.anchor);
        this.drawLine(res.data.anchor);
      });
  },
  methods: {
    handleClick(tab, event) {
      console.log(this.activeName);
      this.$axios
        .post(stores.spring_url + "/home/function6/" + this.activeName, "first")
        .then((res) => {
          //console.log(res.data.totalHot)
          this.drawLine(res.data.anchor);
        });
    },
    drawLine(res) {
      // 基于准备好的dom，初始化echarts实例
      const myChart = echarts.init(document.getElementById("guessAnchor"));
      const xAxisData = [];
      const total = [];

      for (let i = 0; i <= 23; i++) {
        xAxisData.push(i + "h");
      }

      console.log(res);

      var data = [];
      for (let i of res) {
        console.log(i);
        data.push([i.time, i.count]);
      }
      console.log(data);

      var myRegression = ecStat.regression("linear", data);

      myRegression.points.sort(function (a, b) {
        return a[0] - b[0];
      });

      // 绘制图表
      myChart.setOption(
        {
    xAxis: {data:xAxisData},
    yAxis: {},
    series: [{

        data: data,
        type: 'scatter'
    }]
}        
      //   {
      //   title: {
      //     text: "分区主播开播数量走向预测",
      //     left: "center",
      //   },
      //   tooltip: {
      //     trigger: "axis",
      //     axisPointer: {
      //       type: "cross",
      //     },
      //   },
      //   xAxis: {
      //     type: "value",
      //     splitLine: {
      //       lineStyle: {
      //         type: "dashed",
      //       },
      //     },
      //   },
      //   yAxis: {
      //     type: "value",
      //     min: 1.5,
      //     splitLine: {
      //       lineStyle: {
      //         type: "dashed",
      //       },
      //     },
      //   },
      //   series: [
      //     {
      //       name: "scatter",
      //       type: "scatter",
      //       emphasis: {
      //         label: {
      //           show: true,
      //           position: "left",
      //           color: "blue",
      //           fontSize: 16,
      //         },
      //       },
      //       data: data,
      //     },
      //     {
      //       name: "line",
      //       type: "line",
      //       showSymbol: false,
      //       data: myRegression.points,
      //       markPoint: {
      //         itemStyle: {
      //           color: "transparent",
      //         },
      //         label: {
      //           show: true,
      //           position: "left",
      //           formatter: myRegression.expression,
      //           color: "#333",
      //           fontSize: 14,
      //         },
      //         data: [
      //           {
      //             coord: myRegression.points[myRegression.points.length - 1],
      //           },
      //         ],
      //       },
      //     },
      //   ],
      // }
      );
    },
  },
};
</script>
<style>
blockquote {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 40px;
    margin-inline-end: 40px;
    font-size: 12px;
    box-sizing: border-box;
    height: 30px;
    line-height: 30px;
    background: #fde2e2;
    border: 1px solid #F56C6C;
    padding-left: 15px;
    color :#F55151;
    margin-left: 0;
    margin-top: 0;
    margin-right: 0;
}
</style>